<template>
  <div id="greetings-root" class="card">
    <img src="../../images/greetings.png" alt="" />
    <div id="text_box">
      <div id="greetings_title">{{ getTimeState() }} {{ userName }} 🍵</div>
      <div id="greetings">
        <p>欢迎回来:</p>
        <p>让我们来看看今天的工作内容吧！祝你今天工作愉快!</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userName: localStorage.getItem("userName"),
    };
  },
  methods: {
    getTimeState() {
      // 获取当前时间
      let timeNow = new Date();
      let hours = timeNow.getHours();
      let text = ``;
      if (hours >= 0 && hours <= 10) {
        text = `早上好`;
      } else if (hours > 10 && hours <= 14) {
        text = `中午好`;
      } else if (hours > 14 && hours <= 18) {
        text = `下午好`;
      } else if (hours > 18 && hours <= 24) {
        text = `晚上好`;
      }
      return text;
    },
  },
};
</script>
<style scoped>
#greetings-root {
  display: flex;
  width: 61.5vw;
  height: 21vh;
}

#greetings-root > img {
  padding: 3vh;
  height: 21vh;
}

#greetings-root > #text_box {
  float: right;
  padding: 3vh;
  height: 21vh;
  width: auto;
}

#text_box > #greetings_title {
    font-size: 4.5vh;
    color: #374d90;
    font-weight: bold;
    
}

#text_box > #greetings {
    margin-top: 10px;
    padding-left: 2px;
    font-size: 2vh;
}

#text_box > #greetings > p{
    padding-bottom: 5px;
}
</style>